
import { Menu } from 'antd';
import React, { useEffect, useState } from 'react'
import type { MenuProps } from 'antd';
import Buildings from './buildings';
import Hygiene from './hygiene'
import TotalCard from './TotalCard';
import LayerCard from './LayerCard';
import EmergencyCard from './EmergencyCard';
import Normallyopen from './Normallyopen';
import LicensingCard from './LicensingCard';
import ReturnThecard from './ReturnThecard';
import Personnelcard from './personnelcard';
import LadderControl from './LadderControl';
import HourCard from './HourCard';
import { useIntl } from '@umijs/max';
type MenuItem = Required<MenuProps>['items'][number];
const ManageCards: React.FC = () => {

  const [selectedMenu, setSelectedMenu] = React.useState<string | null>(null);

  const intl = useIntl()


  function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
      type,
    } as MenuItem;
  }

  const items: MenuItem[] = [
    getItem(intl.formatMessage({id:"card.Total card"}), '12'),
    getItem(intl.formatMessage({id:"card.Building card"}), '13'),
    getItem(intl.formatMessage({id:"card.Employee card"}), '30'),
    getItem(intl.formatMessage({id:"card.Layer control card"}), '14'),
    getItem(intl.formatMessage({id:"card.Emergency card"}), '15'),
    getItem(intl.formatMessage({id:"card.Hygiene card"}), '16'),
    getItem(intl.formatMessage({id:"card.Always-on card"}), '17'),
    getItem(intl.formatMessage({id:"card.Authorization card"}), '18'),
    getItem(intl.formatMessage({id:"card.Mute card"}), '19'),
    getItem(intl.formatMessage({id:"card.Ladder control card"}), '20'),
    getItem(intl.formatMessage({id:"card.Hour card"}), '21'),
  ];
  const onClick: MenuProps['onClick'] = (e) => {
    setSelectedMenu(e.key);
  };

  const renderContent: () => void | "房卡" | "梯控卡" | "通道卡" | any = () => {
    if (selectedMenu === null) {
      return setSelectedMenu('12')
    }

    // 根据selectedMenu的值渲染对应的数据
    switch (selectedMenu) {
      
      case '12':
        return <TotalCard />;
      case '13':
        return <Buildings />;
      case '30':
        return <Personnelcard />
      case '14':
        return <LayerCard />;
      case '15':
        return <EmergencyCard />;
      case '16':
        return <Hygiene />;
      case '17':
        return <Normallyopen />;
      case '18':
        return <LicensingCard />;
      case '19':
        return <ReturnThecard />;
      case '20':
        return <LadderControl />;
      case '21':
        return <HourCard />;
      default:
        return 12;
    }
  }


  return (
    <>
      <Menu
        onClick={onClick}
        style={{ width: 170, float: "left", height: "840px", paddingTop: "7px" }}
        defaultSelectedKeys={['12']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        items={items}
      />
      <div style={{
        height: "840px", // 容器的高度
        overflowY: "auto", // 当内容超出时允许垂直滚动

        msOverflowStyle: "none", // 隐藏滚动条（适用于IE和Edge浏览器）
        scrollbarWidth: "none", // 隐藏滚动条（适用于Firefox浏览器

        marginLeft: "175px",
        position: "absolute",
        borderRadius: "0",
        width: "85%"
      }}>
        {renderContent()}
      </div >
    </>
  )
}

export default ManageCards
